<template>
  <div>
    <nav-bar title="访客详情"></nav-bar>
    <div class="maxinBox">
      <div class="avatar center">
        <img :src="visitor.headUrl" alt="" style="width: 100%;" @click="bigAvatar(visitor.headUrl)">
      </div>
      <van-cell title="姓名" :value="visitor.name" />
      <van-cell title="性别" :value="visitor.sex | sex" />
      <van-cell title="联系方式" :value="visitor.mobile" />
      <van-cell title="来访事由" :value="visitor.reasonText" />
      <van-cell title="访问开始时间" :value="visitor.visitStartTime | formatDate('YYYY-MM-DD HH:mm')" />
      <van-cell title="访问结束时间" :value="visitor.visitEndTime | formatDate('YYYY-MM-DD HH:mm')" />
    </div>
    <div class="btns" v-if="visitor.status === 3">
      <van-button size="small" type="info" @click="isAgree(1)">通过</van-button>
      <van-button size="small" type="danger" @click="isAgree(2)">拒绝</van-button>
    </div>
  </div>
</template>
<script>
  import visitorAPI from '../../../../api/workAPI/visitorsAPI.js'
  import {ImagePreview} from 'vant'

  export default {
    data() {
      return {
        visitor: {
          headUrl: '',
          name: '',
          sex: '',
          mobile: '',
          reasonText: '',
          visitStartTime: '',
          visitEndTime: ''
        }
      }
    },
    methods: {
      // 查询访客详情
      getVisitorDetails() {
        visitorAPI.getVisitorDetails(this.$route.params.data.id).then(res => {
          this.visitor = res
        })
      },
      // 放大图片
      bigAvatar(img) {
        ImagePreview({
           images: [img],
        })
      },
      isAgree(status) {
        let data = {
          id: this.visitor.id,
          auditResult: status,
          visitEndTime: this.visitor.visitEndTime
        }
        let content
        if (status === 1) {
          content = '确定要通过该访客申请吗'
        } else {
          content = '确定要拒绝该访客申请吗'
        }
        this.$dialog.confirm({
          title: '确认',
          message: content,
        }).then(() => {
          visitorAPI.isAgree(data).then(res => {
            this.$router.push({
              name: 'VisitorsManage'
            })
            this.$toast.success('该访客的申请已处理成功')
          })
        }).catch(() => {
          // on cancel
        });
      }
    },
    mounted() {
      this.getVisitorDetails()
    }
  }
</script>

<style scoped lang="scss">
  .btns{
    margin-top: 4 * $spacing;
    text-align: $center;
  }
</style>
